window.onload = function () {
    const slides = document.querySelectorAll('.picFocus-top img');
    const thumbnails = document.querySelectorAll('.picFocus-bottom-box');
    let currentSlide = 0;

    function nextSlide() {
        slides[currentSlide].classList.remove('active');
        thumbnails[currentSlide].classList.remove('active-thumbnail'); // 移除前一个缩略图的边框效果
        currentSlide = (currentSlide + 1) % slides.length;
        slides[currentSlide].classList.add('active');
        thumbnails[currentSlide].classList.add('active-thumbnail'); // 添加当前缩略图的边框效果
    }

    setInterval(nextSlide, 4000); // 每2秒切换一次轮播图

    // 初始状态下第一张图片和对应的缩略图设置为激活状态
    slides[0].classList.add('active');
    thumbnails[0].classList.add('active-thumbnail');

    // 点击缩略图切换对应的图片
    thumbnails.forEach((thumbnail, index) => {
        thumbnail.addEventListener('click', () => {
            slides[currentSlide].classList.remove('active');
            thumbnails[currentSlide].classList.remove('active-thumbnail');
            currentSlide = index;
            slides[currentSlide].classList.add('active');
            thumbnails[currentSlide].classList.add('active-thumbnail');
        });
    });
};